<template lang="pug">
  .touch-bar(v-if='show')
    .touch-icon(
      v-for='(item, index) in touchMenu',
      :key='index',
      :class='{"presed": index == current}'
      @click='handleTouch({ key: item.key, val: item.value, index })',
      @touchstart='handleTouch({ key: item.key, val: item.value, index })')
      img(:src="getIconImage(item.icon)", alt="")
</template>

<script>
export default {
  data() {
    return {
      show: false,
      num: 0,
      step: 0.2,
      current: -1
    }
  },
  created() {
    this.touchMenu = [
      { icon: 'left', key: 'hlookat_moveforce', value: 0, text: '上移' },
      { icon: 'right', key: 'hlookat_moveforce', value: 1, text: '下移' },
      { icon: 'up', key: 'vlookat_moveforce', value: 0, text: '左移' },
      { icon: 'down', key: 'vlookat_moveforce', value: 1, text: '右移' },
      { icon: 'plus', key: 'fov_moveforce', value: 0, text: '放大' },
      { icon: 'decrease', key: 'fov_moveforce', value: 1, text: '缩小' },
    ]
  },
  mounted() {
    this.$nextTick(() => {
      setTimeout(() => {
        this.show = window.$globalconfig.MODULES.TOUCH_BUTTON
      }, 1000)
    })
  },
  methods: {
    handleTouch({ key, val, index }) {
      this.num = this.step
      if (!val) {
        this.num = -this.step
      }

      this.$krp.stopTurn()
      this.$krp.setView(key, this.num)
      this.current = index

      setTimeout(() => {
        this.num = 0
        this.current = -1
        this.$krp.setView(key, 0)
      }, 200)
    }
  },
  computed: {
    getIconImage() {
      return (name) => {
        return `./static/images/touchicon/${name}.png`
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
.theme-pc-e
  .touch-bar
    bottom: 260px

.touch-bar
  position: absolute
  bottom: 10px
  left: 50%
  transform: translateX(-50%)
  text-align: center
  z-index: 10

  .touch-icon
    $width = 42px
    $height = 38px
    display: inline-block
    width: $width
    height: $height
    border-radius: 50%

    &.presed
      filter: brightness(0.7)

    img
      width: 100%
      height: 100%
</style>
